<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    组件之间的参数传递 :
    父组件向子组件传递参数 :   在父组件中使用子组件标签时  通过添加组件标签属性实现参数传递   在子组件中通过props配置项实现参数接收
    子组件向父组件传递参数
-->
<div id="app">

    <student-info :name="student.name" :age="student.age" :sex="student.sex"></student-info>
    <hr>

    <student-info v-for="(student,index) in students" :key="index"  :name="student.name" :age="student.age" :sex = "student.sex" ></student-info>


    <hr>
    <student-info name="tom" age="30" sex="男"></student-info>
</div>

<script>

    const studentInfo = {
        template: `
                <div>
                    <p>学生姓名:{{name}}</p>
                    <p>学生年龄:{{age}}</p>
                    <p>学生性别:{{sex}}</p>
                </div>
        `,
        // data 必须是function    以便解决多个组件之间data数据互相影响
        data(){
            return {

            }
        },
        //  接收组件标签传递的参数   接收的参数可以向使用data中的属性值一样进行使用
        props:['name','age','sex']
    }

    let vm = new Vue({
        el:'#app',
        data:{
            student:{
                name:'小明',
                age:30,
                sex:'男'
            },
            students:[
                {
                    name:'小明1',
                    age:30,
                    sex:'男'
                },{
                    name:'小明2',
                    age:32,
                    sex:'男'
                },{
                    name:'小明3',
                    age:33,
                    sex:'男'
                }
            ]
        },
        methods:{},
        components:{
            'student-info':studentInfo
        }
      })
</script>
</body>
</html>